<div class="content__title">
    <h1>
        用户管理
    </h1>
</div>

<form nz-form [nzLayout]="'inline'" class="search-form">
    <div nz-form-item>
        <div nz-form-control>
            <nz-input [(ngModel)]="args.account" name="account" nzPlaceHolder="账户"></nz-input>
        </div>
    </div>
    <div nz-form-item>
        <div nz-form-control>
            <nz-input [(ngModel)]="args.name" name="name" nzPlaceHolder="名称"></nz-input>
        </div>
    </div>
    <div nz-form-item>
        <div nz-form-control>
            <nz-select [(ngModel)]="args.sex" name="sex" [nzAllowClear]="false">
                <nz-option nzValue="" nzLabel="性别不限"></nz-option>
                <nz-option nzValue="1" nzLabel="男"></nz-option>
                <nz-option nzValue="2" nzLabel="女"></nz-option>
            </nz-select>
        </div>
    </div>
    <div nz-form-item>
        <div nz-form-control>
            <button nz-button [nzType]="'primary'" (click)="load(true)" [nzLoading]="_loading">搜索</button>
            <button nz-button (click)="clear()" [disabled]="_loading">重置</button>
        </div>
    </div>
</form>

<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <ng-template #body>
                <nz-table #nzTable
                          [nzSize]="'middle'"
                          [nzAjaxData]="_dataSet"
                          [nzShowSizeChanger]="true"
                          [nzShowTotal]="true"
                          [nzLoading]="_loading"
                          [nzTotal]="_total"
                          [(nzPageIndex)]="args.page"
                          (nzPageIndexChange)="load()"
                          [(nzPageSize)]="args.size"
                          (nzPageSizeChange)="load(true)">
                    <thead nz-thead>
                    <tr>
                        <th nz-th>头像</th>
                        <th nz-th>账户</th>
                        <th nz-th>名称</th>
                        <th nz-th>部门</th>
                        <th nz-th>角色</th>
                        <th nz-th>性别</th>
                        <th nz-th>手机</th>
                        <th nz-th>邮箱</th>
                        <th nz-th>状态</th>
                        <th nz-th>备注</th>
                        <th nz-th>操作
                            <span *ngIf="acl.canAbility('7')">
                                <span nz-table-divider></span>
                                <a (click)="edit({id:0})">添加</a>
                            </span>
                        </th>
                    </tr>
                    </thead>
                    <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let i of nzTable.data">
                        <td nz-td>
                            <nz-avatar [nzSrc]="i.avatar" [nzSize]="'large'" [nzIcon]="'user'"></nz-avatar>
                        </td>
                        <td nz-td>{{i.account}}</td>
                        <td nz-td>{{i.name}}</td>
                        <td nz-td>{{i.deptName}}</td>
                        <td nz-td>{{i.roleName}}</td>
                        <td nz-td>
                            <span *ngIf="i.sex=='1'">男</span>
                            <span *ngIf="i.sex=='2'">女</span>
                        </td>
                        <td nz-td>{{i.phone}}</td>
                        <td nz-td>{{i.email}}</td>
                        <td nz-td>
                            <nz-tag *ngIf="i.enable" [nzColor]="'green'">activate</nz-tag>
                            <nz-tag *ngIf="!i.enable" nzColor="orange">disable</nz-tag>
                        </td>
                        <td nz-td>{{i.remark}}</td>
                        <td nz-td>
                            <a *ngIf="acl.canAbility('7')" (click)="edit(i)">编辑</a>
                            <span *ngIf="acl.canAbility('6')">
                                <span nz-table-divider></span>
                                <nz-popconfirm [nzTitle]="'确定删除？'" [nzOkText]="'ok'" [nzCancelText]="'cancel'" (nzOnConfirm)="del(i.id)">
                                    <a nz-popconfirm>删除</a>
                                </nz-popconfirm>
                            </span>
                        </td>
                    </tr>
                    </tbody>
                </nz-table>
            </ng-template>
        </nz-card>
    </div>
</div>
